

import { Card, Form, TextArea } from "@/components/base";
import { Typography } from "@/components/typography";
import { DatePicker } from "@/components/date-picker";
import dayjs from "dayjs";

const { Text } = Typography;

export function CardDetailsForm() {
    return (
        <Card>
            <Text size={16} strong style={{ display: 'block', marginBottom: '16px' }}>
                卡片详情
            </Text>

            <Form.Item
                label="有效期开始时间"
                name="validFrom"
                style={{ width: '100%', padding: 0 }}
                rules={[{ required: true }]}
                getValueProps={(value) => {
                    return {
                        value: value ? dayjs(value) : undefined,
                    };
                }}
                getValueFromEvent={(value) => {
                    return value ? value.format('YYYY-MM-DD 00:00:00') : undefined;
                }}
            >
                <DatePicker />
            </Form.Item>

            <Form.Item
                label="有效期结束时间"
                name="validTo"
                style={{ width: '100%', padding: 0 }}
                rules={[{ required: true }]}
                getValueProps={(value) => {
                    return {
                        value: value ? dayjs(value) : undefined,
                    };
                }}
                getValueFromEvent={(value) => {
                    return value ? value.format('YYYY-MM-DD 23:59:59') : undefined;
                }}
            >
                <DatePicker />
            </Form.Item>

            <Form.Item
                label="备注"
                name="remark"
                style={{ width: '100%', padding: 0 }}
            >
                <TextArea placeholder="请输入备注信息" rows={3} />
            </Form.Item>
        </Card>
    );
} 